<template>
  <section class="login-page">
    <div class="container">
      <img src="@/assets/Logo/logo.png" alt="logo" width="80" height="80" />
      <h1 class="title">Hello,欢迎登录路风华通用脚手架</h1>
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入手机号"
            v-model="loginForm.phone"
            maxlength="11"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="password"
          ><el-input
            placeholder="请输入密码"
            type="password"
            v-model="loginForm.password"
            show-password
            clearable
            maxlength="20"
          ></el-input
        ></el-form-item>
        <el-form-item prop="code"
          ><el-input
            placeholder="请输入验证码"
            style="width: 224px; margin-right: 7px"
            v-model="loginForm.code"
          ></el-input>
          <VerifyCodeImg @change="getVerifyCode"></VerifyCodeImg
        ></el-form-item>
        <el-form-item><el-checkbox>记住密码</el-checkbox></el-form-item>
        <el-form-item>
          <el-button class="btn-login" @click="onLogin">点击登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>

<script setup>
import VerifyCodeImg from "./components/VerifyCodeImg.vue";
import { reactive, ref } from "vue";
// 登录表单
const loginForm = reactive({
  phone: "", //手机号
  password: "", // 密码
  code: "", // 验证码
});
const validateCode = (rule, value, callback) => {
  if (value !== verifyCode) {
    return callback(new Error("验证码不正确"));
  }
  callback();
};
// 校验规则
const loginRules = {
  phone: [
    {
      required: true,
      message: "手机号不能为空",
      trigger: "blur",
    },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式错误", trigger: "blur" },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
    {
      min: 6,
      max: 20,
      message: "密码长度在6-20个字符之间",
      trigger: "blur",
    },
  ],
  code: [
    {
      min: 4,
      max: 4,
      required: true,
      message: "验证码不能为空",
      trigger: "blur",
    },
    {
      min: 4,
      max: 4,
      required: true,
      message: "验证码长度必须是4位",
      trigger: "blur",
    },
    {
      validator: validateCode,
      trigger: "blur",
    },
  ],
};
const loginFormRef = ref(null);
// 登录
const onLogin = () => {
  loginFormRef.value.validate((valid) => {
    if (!valid) return;
    console.log("可以发ajax请求了");
  });
};
let verifyCode = null;
const getVerifyCode = (code) => {
  verifyCode = code;
};

</script>
<script>
export default {
  name: "LoginPage",
};
</script>

<style lang="scss" scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: url(@/assets/images/login-background.jpg);
  background-size: cover;
  .container {
    box-sizing: border-box;
    width: 397px;
    height: 520px;
    padding: 40px 33px 53px;
    border-radius: 30px;
    background-color: #fff;
    .title {
      margin: 27px 0;
      font-size: 22px;
      font-weight: 600;
      color: #222;
    }
    ::v-deep(.el-input) {
      .el-input__wrapper {
        background-color: #f4f5f9;
        border-radius: 20px;
        .el-input__inner::placeholder {
          color: #999;
          font-size: 12px;
        }
      }
    }
    ::v-deep(.el-checkbox) {
      .el-checkbox__inner {
        border-radius: 50%;
      }
      .el-checkbox__label {
        font-size: 12px;
        color: #999;
      }
    }
    .btn-login {
      width: 331px;
      height: 40px;
      font-size: 12px;
      background-image: linear-gradient(to right, #22cfff, #0fa1fe);
      color: #fff;
      border-radius: 20px;
    }
  }
}
</style>
